<template>
  <div class="warpper">
    <img class="bgImg" src="@/assets/bg.png" alt="" />
    <div class="homeBox1_sec2">
      <div class="sec1_box1">
        <div class="voltage">10kV</div>
        <div class="sec1_box2">
          <div class="lineCulb">
            <div class="line_y1"></div>
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="line_y1"></div>
          </div>
          <div class="transformer">630kVA变压器</div>
        </div>
      </div>
      <div class="redArea">
        <div class="redTxt">0.4kV母线</div>
        <div class="redLine2"></div>
        <div class="line_y5"></div>
      </div>
      <div>
        <div class="line_x2"></div>
        <div class="dis_jsb2 line_y4_club line_y4_club2">
          <div class="leftBox">
            <div class="line_icon">
              <div class="line_y7"></div>
              <div class="dis_aic status_icon">
                <div class="indicate2">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="energyBox" src="@/assets/energyBox2.png" />
              </div>
              <div class="pileNum">储能</div>
              <div class="dis_aic txtArea">
                <div class="txtNumClub txtNumClub2">
                  <div class="txtNum">剩余SOC (%) ：</div>
                  <div class="txtNum">电池SOH (%) ：</div>
                  <div class="txtNum">日充电量 (kWh) ：</div>
                  <div class="txtNum">日放电量 (kWh) ：</div>
                  <div class="txtNum">最高温度 (℃) ：</div>
                  <div class="txtNum">最低温度 (℃) ：</div>
                </div>
                <div class="tac">
                  <div class="txtNum">63</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">75</div>
                  <div class="txtNum">10</div>
                </div>
              </div>
            </div>
            <div class="line_icon" style="margin-left: 15%">
              <div class="line_y8"></div>
              <div class="dis_aic status_icon">
                <div class="indicate3">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="ac_icon2" src="@/assets/ac_icon22.png" />
              </div>
              <div class="pileNum pileNum2">V2G快充桩 (120kW)</div>
              <div class="dis_aic txtArea">
                <div class="txtNumClub">
                  <div class="txtNum">充电电流 (A) ：</div>
                  <div class="txtNum">充电电压 (V) ：</div>
                  <div class="txtNum">充电功率 (kW) ：</div>
                  <div class="txtNum">日充电量 (kWh) ：</div>
                  <div class="txtNum">月充电量 (kWh) ：</div>
                </div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="dis_aic txtArea" style="margin-top: 10px">
                <div class="txtNumClub">
                  <div class="txtNum">放电电流 (A) ：</div>
                  <div class="txtNum">放电电压 (V) ：</div>
                  <div class="txtNum">放电功率 (kW) ：</div>
                  <div class="txtNum">日放电量 (kWh) ：</div>
                  <div class="txtNum">月放电量 (kWh) ：</div>
                </div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
            </div>
          </div>
          <div class="rightBox">
            <div class="dis_jsb">
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="dis_aic txtArea">
                  <div class="txtNumClub">
                    <div class="txtNum">充电电流 (A) ：</div>
                    <div class="txtNum">充电电压 (V) ：</div>
                    <div class="txtNum">充电功率 (kW) ：</div>
                    <div class="txtNum">日充电量 (kWh) ：</div>
                    <div class="txtNum">月充电量 (kWh) ：</div>
                  </div>
                  <div class="tac">
                    <div class="txtNum">1000</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                  </div>
                </div>
              </div>
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="line_y6"></div>
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
            </div>
            <div class="dis_jsb">
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="dis_aic txtArea">
                  <div class="txtNumClub">
                    <div class="txtNum">充电电流 (A) ：</div>
                    <div class="txtNum">充电电压 (V) ：</div>
                    <div class="txtNum">充电功率 (kW) ：</div>
                    <div class="txtNum">日充电量 (kWh) ：</div>
                    <div class="txtNum">月充电量 (kWh) ：</div>
                  </div>
                  <div class="tac">
                    <div class="txtNum">1000</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                  </div>
                </div>
              </div>
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
              <div class="line_icon">
                <div class="dis_aic status_icon">
                  <div class="indicate">
                    <div class="dis_aic m8">
                      <div>正常</div>
                      <div class="pilot_lamp1" v-if="show1"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>停止</div>
                      <div class="pilot_lamp1" v-if="show2"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                    <div class="dis_aic m8">
                      <div>异常</div>
                      <div class="pilot_lamp1" v-if="show3"></div>
                      <div class="pilot_lamp2" v-else></div>
                    </div>
                  </div>
                  <img class="ac_icon11" src="@/assets/ac_icon11.png" />
                </div>
                <div class="pileNum">7kW交流桩</div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="flex">
          <div class="table_box1">
            <div class="dis_jsb">
              <div class="leftTitle">储能充放电量：</div>
              <div class="dis_aic">
                <div class="dis_aic boxClub2">
                  <div
                    class="day"
                    :class="active == 0 ? 'active' : ''"
                    @click="select(0)"
                  >
                    每日
                  </div>
                  <div
                    class="mounth"
                    :class="active == 1 ? 'active' : ''"
                    @click="select(1)"
                  >
                    每月
                  </div>
                </div>
              </div>
            </div>
            <div class="chart" ref="chart1"></div>
          </div>
          <div class="table_box1 table_box2">
            <div class="dis_jsb">
              <div class="leftTitle">快充桩充放电功率：</div>
              <div class="dis_aic">
                <div class="dis_aic boxClub2">
                  <div
                    class="day"
                    :class="active2 == 0 ? 'active' : ''"
                    @click="select2(0)"
                  >
                    每时
                  </div>
                  <div
                    class="mounth"
                    :class="active2 == 1 ? 'active' : ''"
                    @click="select2(1)"
                  >
                    每日
                  </div>
                </div>
              </div>
            </div>
            <div class="chart" ref="chart2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { electricStorge, quickCharge } from "/src/api/index"; // 引入数据接口

export default {
  name: "HelloWorld",
  data() {
    return {
      show1: true,
      show2: false,
      show3: true,
      active: 0,
      active2: 0,
      interval: null,
      chart_time: 1000,

      chartInstance: null,
      chartInstance2: null,

      yearData: [
        { year: "每日", data: [[], []] }, // 每日数据（长度=当月天数）
        {
          year: "每月",
          data: [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          ],
        }, // 12个月
      ],
      dailyRefreshTimer: null,

      hourConfig: {
        xOrder: [0, 10, 20, 30, 40, 50], // 固定分钟顺序
        xLabels: ["0分钟", "10分钟", "20分钟", "30分钟", "40分钟", "50分钟"], // 分钟标签
      },
      // 每日数据配置（日期：默认显示当月1-31号，可根据实际月份调整）
      dayConfig: {
        xOrder: Array.from({ length: 31 }, (_, i) => i + 1), // 1-31号
        xLabels: Array.from({ length: 31 }, (_, i) => `${i + 1}日`), // 日期标签
      },
      chargeDischargeData: [[], []], // 存储处理后的充电/放电数据

      hourTimer: null, // 存储「每时」请求定时器（10分钟一次）
      dayTimer: null, // 存储「每日」请求定时器（1天一次）
    };
  },

  created() {},

  mounted() {
    this.$nextTick(() => {
      this.initCharts();
      this.initDayConfig();
      this.getData1().then(() => {
        this.drawChart1(this.active); // 首次渲染图表
      });
      this.startDailyAutoRefresh(); // 启动每日自动刷新（仅getData1）
      this.startChartRefresh(); // 启动图表轮询

      // 监听窗口大小变化，实时调整图表尺寸
      window.addEventListener("resize", this.handleResize);
    });
  },

  methods: {
    // 初始化图表实例
    initCharts() {
      // 销毁可能存在的旧实例
      this.destroyCharts();
      // 创建新实例（确保DOM节点存在）
      if (this.$refs.chart1) {
        this.chartInstance = this.$echarts.init(this.$refs.chart1);
      }
      if (this.$refs.chart2) {
        this.chartInstance2 = this.$echarts.init(this.$refs.chart2);
      }
    },

    getTimeToNextDay() {
      const now = new Date();
      const nextDay = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate() + 1
      );
      // 次日0点 - 当前时间 = 剩余毫秒数
      return nextDay.getTime() - now.getTime();
    },

    /**
     * 启动每日自动刷新（每天0点触发一次getData1）
     */
    startDailyAutoRefresh() {
      // 1. 计算首次刷新的延迟时间（距离次日0点的毫秒数）
      const firstDelay = this.getTimeToNextDay();

      // 2. 首次延迟执行（次日0点触发）
      setTimeout(() => {
        // 执行数据刷新
        this.getData1().then(() => {
          this.drawChart1(this.active); // 刷新后重新渲染图表
          console.log("每日自动刷新：储能充放电数据已更新");
        });

        // 3. 之后每天循环执行（24小时=86400000毫秒）
        this.dailyRefreshTimer = setInterval(() => {
          this.getData1().then(() => {
            this.drawChart1(this.active);
            console.log("每日自动刷新：储能充放电数据已更新");
          });
        }, 86400000); // 24小时的毫秒数
      }, firstDelay);
    },

    /**
     * 清除每日自动刷新定时器（组件销毁时调用）
     */
    clearDailyRefreshTimer() {
      if (this.dailyRefreshTimer) {
        clearInterval(this.dailyRefreshTimer);
        this.dailyRefreshTimer = null;
      }
    },

    // 启动图表定时刷新
    startChartRefresh() {
      const timeType = this.active2 === 0 ? "hour" : "day";
      this.startData2Timer(timeType);
    },

    // 异步获取数据
    async getData1() {
      try {
        const res = await electricStorge({
          timeType: this.active == 0 ? "day" : "month",
        });
        // console.log(res, "=====");
        if (this.active === 0) {
          this.formatDayData(res); // 字段→当日（14=14号）
        } else {
          this.formatMonthData(res); // 字段→当月（1=1月）
        }
      } catch (err) {
        console.error("数据获取失败:", err);
        this.initEmptyData(); // 失败时填充全0
      }
    },

    async getData2() {
      try {
        const res = await quickCharge({
          timeType: this.active2 == 0 ? "hour" : "day",
        });
        // console.log(res, "==getData2===");
        // 解构接口数据（默认空对象，避免报错）
        const { chargeQt = {}, dischargeQt = {} } = res;

        // 关键：根据 active2 动态选择配置（每时=分钟，每日=日期）
        const currentConfig =
          this.active2 === 0 ? this.hourConfig : this.dayConfig;
        const { xOrder } = currentConfig;

        // 按当前配置的顺序，提取充电/放电数据（无数据填0，字符串转数字）
        const chargeData = xOrder.map((key) => {
          return Number(chargeQt[key]) || 0; // key：分钟（0/10...）或日期（1/2...）
        });
        const dischargeData = xOrder.map((key) => {
          return Number(dischargeQt[key]) || 0;
        });

        // 存储处理后的数据
        this.chargeDischargeData = [chargeData, dischargeData];
      } catch (err) {
        console.error("数据获取失败:", err);
        // 失败时按当前配置填充全0数据
        const currentConfig =
          this.active2 === 0 ? this.hourConfig : this.dayConfig;
        this.chargeDischargeData = [
          currentConfig.xOrder.map(() => 0),
          currentConfig.xOrder.map(() => 0),
        ];
      }
    },

    // 初始化空数据（失败备用）
    initEmptyData() {
      const currentMonthDays = this.getDaysInCurrentMonth();
      // 每日：当月天数全0
      this.yearData[0] = {
        year: "每日",
        data: [
          Array(currentMonthDays).fill(0),
          Array(currentMonthDays).fill(0),
        ],
      };
      // 每月：12个月全0
      this.yearData[1] = {
        year: "每月",
        data: [Array(12).fill(0), Array(12).fill(0)],
      };
    },

    // 获取当前月份的天数（自动适配平年闰年、大小月）
    getDaysInCurrentMonth() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份从0开始，需+1
      return new Date(year, month, 0).getDate(); // 下个月1号的前一天=当月最后一天
    },

    // 初始化每日配置（在mounted中调用）
    initDayConfig() {
      const days = this.getDaysInCurrentMonth();
      this.dayConfig.xOrder = Array.from({ length: days }, (_, i) => i + 1);
      this.dayConfig.xLabels = Array.from(
        { length: days },
        (_, i) => `${i + 1}日`
      );
    },

    // 格式化每日数据：动态提取接口所有字段，字段名=日期（如14=14号）
    formatDayData(apiData) {
      const chargeTag = apiData.TAG_4F34 || {}; // 每日充电数据
      const dischargeTag = apiData.TAG_4F36 || {}; // 每日放电数据
      const currentMonthDays = this.getDaysInCurrentMonth();

      // 初始化当月所有日期为0（数组索引=日期-1）
      const dayChargeValues = Array(currentMonthDays).fill(0);
      const dayDischargeValues = Array(currentMonthDays).fill(0);

      // 动态提取充电数据的所有字段（字段名=日期）
      Object.entries(chargeTag).forEach(([field, value]) => {
        const day = Number(field); // 字段名转为数字（如"14"→14）
        const index = day - 1; // 转换为数组索引（14号→13）
        // 验证：字段是有效数字 + 日期在当月范围内（1-当月天数）
        if (!isNaN(day) && index >= 0 && index < currentMonthDays) {
          dayChargeValues[index] = value ?? 0;
        }
      });

      // 动态提取放电数据的所有字段（字段名=日期）
      Object.entries(dischargeTag).forEach(([field, value]) => {
        const day = Number(field);
        const index = day - 1;
        if (!isNaN(day) && index >= 0 && index < currentMonthDays) {
          dayDischargeValues[index] = value ?? 0;
        }
      });

      // 更新每日数据
      this.yearData[0] = {
        year: "每日",
        data: [dayChargeValues, dayDischargeValues],
      };
    },

    // 格式化每月数据：动态提取接口所有字段，字段名=月份（如1=1月）
    formatMonthData(apiData) {
      const chargeTag = apiData.TAG_4F34 || {}; // 每月充电数据
      const dischargeTag = apiData.TAG_4F36 || {}; // 每月放电数据

      // 初始化12个月全0（数组索引=月份-1）
      const monthChargeValues = Array(12).fill(0);
      const monthDischargeValues = Array(12).fill(0);

      // 动态提取充电数据的所有字段（字段名=月份）
      Object.entries(chargeTag).forEach(([field, value]) => {
        const month = Number(field); // 字段名转为数字（如"1"→1）
        const index = month - 1; // 转换为数组索引（1月→0）
        // 验证：字段是有效数字 + 月份在1-12范围内
        if (!isNaN(month) && index >= 0 && index < 12) {
          monthChargeValues[index] = value ?? 0;
        }
      });

      // 动态提取放电数据的所有字段（字段名=月份）
      Object.entries(dischargeTag).forEach(([field, value]) => {
        const month = Number(field);
        const index = month - 1;
        if (!isNaN(month) && index >= 0 && index < 12) {
          monthDischargeValues[index] = value ?? 0;
        }
      });

      // 更新每月数据
      this.yearData[1] = {
        year: "每月",
        data: [monthChargeValues, monthDischargeValues],
      };
    },

    startData2Timer(timeType) {
      // 先销毁所有旧定时器（避免多个定时器同时运行）
      this.clearData2Timer();

      // 定义频率：hour=10分钟（600000ms），day=1天（86400000ms）
      const interval = timeType === "hour" ? 600000 : 86400000;
      // 定义定时器回调（请求数据+刷新图表）
      const timerCallback = async () => {
        await this.getData2();
        this.drawChart2();
        // console.log(`[${timeType}] 定时刷新：快充桩数据已更新`);
      };

      // 立即执行一次（避免等待第一个周期才请求）
      timerCallback();

      // 创建并存储定时器
      if (timeType === "hour") {
        this.hourTimer = setInterval(timerCallback, interval);
      } else {
        this.dayTimer = setInterval(timerCallback, interval);
      }
    },

    clearData2Timer() {
      if (this.hourTimer) {
        clearInterval(this.hourTimer);
        this.hourTimer = null;
      }
      if (this.dayTimer) {
        clearInterval(this.dayTimer);
        this.dayTimer = null;
      }
    },

    // 处理窗口大小变化
    handleResize() {
      if (this.chartInstance) this.chartInstance.resize();
      if (this.chartInstance2) this.chartInstance2.resize();
    },

    // 切换每日/每月时重新获取数据并渲染
    select(index) {
      this.active = index;
      this.getData1().then(() => {
        this.drawChart1(index); // 传入索引强制刷新图表
      });
    },

    // 储能充放电量：动态适配x轴标签（每日=日期，每月=月份）
    drawChart1(index) {
      // 动态生成x轴标签
      const yearData = this.yearData;
      const targetIndex = index !== undefined ? index : this.active;
      const targetData = yearData[targetIndex];

      let xAxisData = [];
      if (targetData.year === "每日") {
        const days = targetData.data[0].length;
        xAxisData = Array.from({ length: days }, (_, i) => `${i + 1}日`);
      } else {
        xAxisData = [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ]; // 完整月份数组
      }

      const option = {
        color: ["#F0DE1F", "#25BEFD"],
        tooltip: { trigger: "axis" },
        legend: { textStyle: { color: "#4c9bfd" }, right: "10%" },
        grid: {
          top: "5%",
          left: "2%",
          right: "2%",
          bottom: "5%",
          show: false,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxisData, // 动态x轴标签
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            interval: 0,
            rotate: 45,
            fontSize: 12,
          },
          axisLine: { show: false },
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLabel: { color: "#ffffff", formatter: "{value} kWh" },
          axisLine: { show: false },
          splitLine: { lineStyle: { color: "#012f4a" } },
        },
        series: [
          {
            name: "充电",
            type: "line",
            smooth: false,
            data: targetData.data[0],
          },
          {
            name: "放电",
            type: "line",
            smooth: false,
            data: targetData.data[1],
          },
        ],
      };

      this.chartInstance.setOption(option);
    },

    select2(index) {
      this.active2 = index;
      const timeType = index === 0 ? "hour" : "day";
      this.startData2Timer(timeType);
    },

    drawChart2() {
      const { chargeDischargeData = [[0], [0]], active2 } = this;
      // 动态选择当前配置（每时=分钟，每日=日期）
      const currentConfig = active2 === 0 ? this.hourConfig : this.dayConfig;
      const { xLabels } = currentConfig;

      const option = {
        color: ["#F0DE1F", "#25BEFD"],
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            // 动态调整tooltip显示（分钟/日期）
            const label = active2 === 0 ? "分钟" : "日";
            return (
              `${params[0].axisValue}${label}<br/>` +
              `${params[0].seriesName}：${params[0].value}<br/>` +
              `${params[1].seriesName}：${params[1].value}`
            );
          },
        },
        legend: {
          textStyle: { color: "#4c9bfd" },
          right: "10%",
          data: ["充电", "放电"],
        },
        grid: {
          top: "8%",
          left: "2%",
          right: "2%",
          bottom: "3%",
          show: false,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xLabels, // 动态X轴标签（分钟/日期）
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            rotate: active2 === 1 ? 45 : 0, // 日期标签旋转45度，避免重叠
          },
          axisLine: { show: false },
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            formatter: "{value} kWh", // 保持数值原格式
          },
          axisLine: { show: false },
          splitLine: { lineStyle: { color: "#012f4a" } },
        },
        series: [
          {
            name: "充电",
            type: "line",
            smooth: false,
            data: chargeDischargeData[0],
            symbol: "circle", // 显示数据点
            symbolSize: 6, // 数据点大小
          },
          {
            name: "放电",
            type: "line",
            smooth: false,
            data: chargeDischargeData[1],
            symbol: "circle",
            symbolSize: 6,
          },
        ],
      };

      this.chartInstance2.setOption(option);
    },

    // 销毁图表实例
    destroyCharts() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
      if (this.chartInstance2) {
        this.chartInstance2.dispose();
        this.chartInstance2 = null;
      }
    },
  },

  beforeDestroy() {
    // 清理所有定时器和事件监听
    this.clearData2Timer();
    this.clearDailyRefreshTimer(); // 清除每日自动刷新定时器
    this.destroyCharts();
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>
<style lang="less" scoped>
.warpper {
  padding-top: 10px;
}
.bgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.homeBox1_sec2 {
  width: 100%;

  .sec1_box1,
  .sec1_box2 {
    position: relative;
    display: flex;
    justify-content: center;

    .voltage {
      font-weight: normal;
      font-size: 16px;
      color: #ffffff;
    }
  }

  .sec1_box2 {
    align-items: center;

    .lineCulb {
      text-align: center;
      margin: 0 16px 0 8px;

      .line_y1 {
        width: 2px;
        height: 20px;
        background: #57c2d7;
        margin: 0 auto;
      }
    }

    .lineCulb .circle1,
    .lineCulb .circle2 {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #57c2d7;
      margin: 0 auto;
    }

    .lineCulb .circle2 {
      margin-top: -10px;
    }

    .transformer {
      font-weight: normal;
      font-size: 16px;
      color: #ffffff;
    }
  }

  .redArea {
    position: relative;
    width: 90%;
    margin: 0 auto;

    .redTxt {
      position: absolute;
      top: -32px;
      right: 0;
      font-size: 16px;
      color: #ffffff;
      line-height: 32px;
    }

    .redLine2 {
      width: 100%;
      height: 6px;
      background: #ff1515;
    }
  }

  .line_y5 {
    width: 2px;
    height: 24px;
    background: #57c2d7;
    margin: 0 auto;
  }

  .line_y6,
  .line_y7,
  .line_y8 {
    width: 2px;
    height: 20px;
    background: #57c2d7;
    margin-bottom: 8px;
  }

  .line_y7 {
    height: 60px;
  }

  .line_y8 {
    height: 40px;
  }

  .energyBox {
    width: 340px;
    height: 120px;
  }

  .txtNum {
    font-weight: normal;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
    z-index: -1;
  }

  .ac_icon2 {
    width: 46px;
    height: 138px;
  }

  .pileNum2 {
    width: 132px;
  }
}

.line_x2 {
  position: relative;
  left: 65px;
  width: calc(90% - 210px);
  height: 2px;
  background: #57c2d7;
  margin: 0 auto;
}

.line_y4_club {
  width: 90%;
  margin: 0 auto;
}

.line_y4_club2 {
  width: 90%;
  margin: 0 auto;

  .leftBox {
    display: flex;
    width: 45%;
  }

  .rightBox {
    width: 55%;
  }
}

.line_y4_club .line_icon {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  align-items: center;
}

.line_icon2 {
  display: flex;
  flex-direction: column;
}

.ac_pile .acArea .line_y4 {
  width: 2px;
  height: 60px;
  background: #57c2d7;
  margin-bottom: 8px;
}

.status_icon {
  position: relative;
  /* width: 22%; */
}

.indicate,
.indicate2,
.indicate3 {
  position: absolute;
  left: -200%;
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
  /* margin-right: 10px; */
}

.indicate2 {
  left: -20%;
}

.indicate3 {
  left: -130%;
}

.pilot_lamp1,
.pilot_lamp2 {
  width: 10px;
  height: 10px;
  background: #8d8d8d;
  border-radius: 50%;
  margin-left: 4px;
}

.pilot_lamp2 {
  background: #0eff25;
}

.status_icon .ac_icon11 {
  width: 26px;
  height: 100px;
}

.pileNum {
  width: 78px;
  font-size: 14px;
  color: #ffffff;
  line-height: 32px;
  text-align: center;
}

.txtArea {
  position: relative;
  z-index: -1;
}

.txtNumClub {
  position: absolute;
  top: 0;
  left: -400%;
  width: 140px;
  text-align: right;
}

.txtNumClub2 {
  left: -520%;
}

.redCulb {
  position: relative;

  .redLine {
    width: 90%;
    height: 6px;
    background: #ff1515;
    margin-left: 4%;
  }
}

.inverterArea {
  width: 40%;
  /* border: 1px solid red; */
}

.inverter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inverter .txt_icon {
  position: relative;
  /* width: 100%; */
}

.inverter .line_y2 {
  width: 2px;
  height: 60px;
  background: #57c2d7;
}

.inverter .icon1_1 {
  width: 62px;
  height: 78px;
  vertical-align: middle;
}

.inverter .icon1_2 {
  width: 92px;
  height: 92px;
  vertical-align: middle;
  margin-bottom: 10px;
}

.inverter .inverterTxt {
  position: absolute;
  left: -60%;
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
  /* margin-right: 10px; */
}

.table_box1 {
  // width: calc(1920 / 2 / 1920 * 100%);
  width: 900px;
  height: 140px;
  margin-top: 10px;
  //   border: 1px solid red;

  .leftTitle {
    font-weight: 500;
    font-size: 18px;
    color: #26b9d5;
    line-height: 26px;
    z-index: 9999;
  }

  .boxClub1 {
    width: 84px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  .charge,
  .charge2 {
    width: 42px;
    font-size: 14px;
    color: #f0de1f;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    z-index: 9999;
  }

  .charge2 {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    color: #25befd;
  }

  .boxClub2 {
    width: 80px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #ffffff;
    margin: 0 40px 0 10px;
  }

  .day,
  .mounth {
    width: 40px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    z-index: 9999;
  }

  .active {
    color: #333;
    background: #ffffff;
  }
}

.table_box2 {
  height: 130px;
}
</style>
